<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<style>
	#father{
		border:1px solid #f00;
		/*
		1、把父盒子设置成伸缩布局
		2、子元素水平排列
		*/
		display: flex;
		flex-direction: column;
	}
	.son{
		width:100px;
		height:100px;
		background: #ccc;
		border:1px solid blue;
	}
</style>
<body>
 <div id="father">
	 <div class="son"></div>
	 <div class="son"></div>
	 <div class="son"></div>
 </div>
</body>
</html>